<template>
  <div style="border: 1px solid #ccc;">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
      <Editor style="height: 500px; overflow-y: hidden" v-model="rich_text" :defaultConfig="editorConfig" @onCreated="handleCreated" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef, ref } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const rich_text = ref('')
const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...'
}

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
// editorConfig.MENU_CONF['uploadImage'] = {
//     // 其他配置...
//     server:"",
//     // 小于该值就插入 base64 格式（而不上传），默认为 0
//     base64LimitSize: 5 * 1024 // 5kb
// }
</script>